<template>
  <div id="main">
    <el-card class="add-box-card" :body-style="{height:'calc(100% - 76px)',overflow:'auto',display:'flex'}">
      <div slot="header" class="box-card-title">
        <span>添加维修人员</span>
      </div>

      <el-form :model="addMemberFormData" :rules="rules" ref="ruleForm" class="edit-form less-margin-form" label-width="100px" label-position="right">
        <el-form-item label="姓　　名：" prop="name">
          <el-input class="add-input" v-model="addMemberFormData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="设置工号：" prop="account">
          <el-input class="add-input" v-model="addMemberFormData.account" placeholder="请输入工号"></el-input>
        </el-form-item>
        
        <el-form-item label="年　　龄：">
          <el-input class="add-input" v-model="addMemberFormData.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="居住地址：">
          <el-input class="add-input" v-model="addMemberFormData.address" placeholder="请输入居住地址"></el-input>
        </el-form-item>
        <el-form-item label="目前岗位：">
          <el-input class="add-input" v-model="addMemberFormData.job" placeholder="请输入目前岗位"></el-input>
        </el-form-item>
        <el-form-item label="联系电话：" prop="tel">
          <el-input class="add-input" v-model="addMemberFormData.tel" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="设置密码：" prop="password">
          <el-input class="add-input" v-model="addMemberFormData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="footer">
      <el-button  class="greenButton" @click="addjia('ruleForm')" type="primary">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      addMemberFormData: {
        name: "",
        tel: "",
        age: "",
        address: "",
        job: "",
        account: "",
        password: ""
      },
      rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          account: [
            { required: true, message: '请输入工号', trigger: 'blur' }
          ],
          tel: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
          ],
          password: [
            {  required: true, message: '请输入密码', trigger: 'blur' }
          ]
        }
    };
  },
  methods:{
    //添加
    addjia(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            if(this.addMemberFormData.tel == ''){
        this.$message({
                            message: '请输入手机号',
                            type: 'error',
                            duration:'2000'
                          });
                          return
           
      }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.addMemberFormData.tel))){
        this.$message({
                            message: '手机号格式不对',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }
      else if(this.addMemberFormData.account == ''){
        this.$message({
                            message: '请输入工号',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }else if(this.addMemberFormData.u_name == ''){
        this.$message({
                            message: '请输入姓名',
                            type: 'error',
                            duration:'2000'
                          });
                          return                         
      
      }else if(this.addMemberFormData.password == ''){
        this.$message({
                            message: '请输入密码',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }else{
      let param = {
        u_name:this.addMemberFormData.name,
        u_tel:this.addMemberFormData.tel,
        u_age:this.addMemberFormData.age,
        u_address:this.addMemberFormData.address,
        u_post:this.addMemberFormData.job,
        u_account:this.addMemberFormData.account,
        u_pass:this.addMemberFormData.password
      }
      this.ajaxCommon.ajax({
                    url: 'WXuseradd',
                    method:'post',
                    data: param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                        this.$message({
                                     message: '添加成功',
                                     type: 'success',
                                     duration:'2000'
                                   });
                        this.addMemberFormData= {
                                    name: "",
                                    tel: "",
                                    age: "",
                                    address: "",
                                    job: "",
                                    account: "",
                                    password: ""
                                  }
                      }else{
                        this.$message({
                                     message: res.status,
                                     type: 'error',
                                     duration:'2000'
                                   });
                      }
                    }
                });
      }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      // if(this.addMemberFormData.tel == ''){
      //   this.$message({
      //                       message: '请输入手机号',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return
           
      // }else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.addMemberFormData.tel))){
      //   this.$message({
      //                       message: '手机号格式不对',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }
      // else if(this.addMemberFormData.account == ''){
      //   this.$message({
      //                       message: '请输入工号',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }else if(this.addMemberFormData.u_name == ''){
      //   this.$message({
      //                       message: '请输入姓名',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return                         
      
      // }else if(this.addMemberFormData.password == ''){
      //   this.$message({
      //                       message: '请输入密码',
      //                       type: 'error',
      //                       duration:'2000'
      //                     });
      //                     return

      // }else{
      // let param = {
      //   u_name:this.addMemberFormData.name,
      //   u_tel:this.addMemberFormData.tel,
      //   u_age:this.addMemberFormData.age,
      //   u_address:this.addMemberFormData.address,
      //   u_post:this.addMemberFormData.job,
      //   u_account:this.addMemberFormData.account,
      //   u_pass:this.addMemberFormData.password
      // }
      // this.ajaxCommon.ajax({
      //               url: 'WXuseradd',
      //               method:'post',
      //               data: param,
      //               success: (res) => {
      //                 console.log(res)
      //                 if(res.code == 200){
      //                   this.$message({
      //                                message: '添加成功',
      //                                type: 'success',
      //                                duration:'2000'
      //                              });
      //                   this.addMemberFormData= {
      //                               name: "",
      //                               tel: "",
      //                               age: "",
      //                               address: "",
      //                               job: "",
      //                               account: "",
      //                               password: ""
      //                             }
      //                 }else{
      //                   this.$message({
      //                                message: res.status,
      //                                type: 'error',
      //                                duration:'2000'
      //                              });
      //                 }
      //               }
      //           });
      // }
    }

  }
  
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }

    .edit-form {
      width: 50%;

      .add-green-text {
        display: inline-flex;
        color: #00bdac;
        width: 140px;
        justify-content: space-between;
        align-items: center;
        vertical-align: bottom;
        margin-left: 14px;

        img {
          cursor: pointer;
          width: 22px;
          height: 22px;
        }
      }
    }
  }

  .add-input {
    width: 260px;
  }

  .add-sign-input {
    width: 180px;
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
